<template>
  <div>
    <HomeTop></HomeTop>
    <div class="">
      <div class="ok-page-width">
        <div>
          <el-image style="width: 100%;height: 260px;margin-top: 20px;border-radius: 5px" :src="require('@/static/images/image02.jpg')"></el-image>
        </div>
        <div class="line-20"></div>
        <div class="ok-box-flex" style="min-height: 500px">
          <div class="ok-page-left">
            <div class="ok-width-max">
              <div class="ok-park-model-menu" style="width: 100%">
                <div class="title">乡村介绍</div>
                <div class="item" :class="{active1:infoType=='history'}" id="contactInfo" @click="selectInfo('history')" style="cursor:pointer">乡村历史</div>
                <div class="item" :class="{active1:infoType=='background'}" id="feedback" @click="selectInfo('background')" style="cursor:pointer">乡村背景</div>
                <div class="item" :class="{active1:infoType=='culture'}" id="feedback" @click="selectInfo('culture')" style="cursor:pointer">乡村文化</div>
              </div>
            </div>
          </div>
          <div class="ok-page-main">
            <div class="ok-width-max">
              <div class="ok-park-info-title">
                <el-page-header @back="goBack" :content="info.infoTypeName"></el-page-header>
              </div>
              <div class="ok-info20" style="margin-top: 20px;">
                <div class="ok-article-body">
                  <div style="padding: 20px 40px 40px 40px;text-align: left">
                    <div v-html="info.intro"></div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="line-20"></div>
    <HomeFoot></HomeFoot>
  </div>
</template>

<script>
// @ is an alias to /src
import HomeTop from "@/components/HomeTop.vue";
import HomeFoot from "@/components/HomeFoot.vue";
import api from "@/api/publicApi";

export default {
  name: 'IntroduceIndex',
  components: {
    HomeFoot,
    HomeTop,
  },
  data(){
    return{
      infoType:"history",
      info:{},
    }
  },
  mounted() {
    this.init();
  },
  methods:{
    init(){
      if (this.$route.query.type){
        this.infoType = this.$route.query.type;
      }
      api.getInfo({type:this.infoType}).then(res =>{
        this.info = res.result;
      })
    },
    selectInfo(item){
      this.infoType = item;
      this.$router.push({
        path:"/views/introduce/index",
        query:{
          type:item
        }
      })
      this.init();
    },
    goBack() {
      history.go(-1);
    },
  }
}
</script>
<style>
a{
  color: black;
}
a:hover{
  color: #0092FF;
}
</style>
